<template>
<section>
	<header>
			<router-link to='/home'><img src="static/jiudianimg/8gsomz20aqwivp8ilr2i4novhy9kbkcp.png"></router-link>
			<span>旅游</span>
			<span></span>
		</header>
		
		<div class="search">

			<a href="#"><span>北京</span></a><span><img src="../image/fangdajing.png" alt=""></span><input type="text" placeholder="目的地/景点/酒店/邮轮">
		</div>

		<div class="lb">
			<img src="../image/1500370049_16336.jpg">
		</div>
		
		<div class="hot">
			<span></span><span>热门好去处</span>
		</div>
		
		<div class="hb">
			<img src="../image/1502779108_87511.jpg">
		</div>

		<div class="nav">
			<ul>
					<li><a href="#">欢乐谷</a></li>
					<li><a href="#">欢乐谷</a></li>
					<li><a href="#">欢乐谷</a></li>
					<li><a href="#">欢乐谷</a></li>
					<li><a href="#">欢乐谷</a></li>
					<li><a href="#">欢乐谷</a></li>
					<li><a href="#">欢乐谷</a></li>
					<li><a href="#">欢乐谷</a></li>
					<li><a href="#">欢乐谷</a></li>
					<li><a href="#">欢乐谷</a></li>
				</ul>
		</div>
		
		<div class="theme">
			<span>——</span>
			<span>·</span>
			<span>热门主题</span>
			<span>·</span>
			<span>——</span>
		</div>
		
		<div class="theme-img">
			<div class="theme-left">
				<img src="../image/theme1.jpg" alt="">
			</div>
			<div class="theme-right">
				<img src="../image/theme2.jpg" alt="">
				<img src="../image/theme3.jpg" alt="">
			</div>
		</div>
		
		<div class="hot">
			<span></span><span>特卖周爆款</span>
		</div>
		
		<div class="lb-x">
			<dl>
				<dt><img src="../image/lb-x1.jpg" alt=""></dt>
				<dd>【夜宿海洋馆奇妙夜 成都2天1晚自由行特卖】住成都海滨城浩海立方海洋馆露营，水母培育室课堂，4D魔幻艺术演出，获环保小卫士证书，海狮表演，夜巡探险，鲨鱼剧场，小小饲养员</dd>
				<span>￥388起</span>
			</dl>
			<dl>
				<dt><img src="../image/lb-x1.jpg" alt=""></dt>
				<dd>【夜宿海洋馆奇妙夜 成都2天1晚自由行特卖】住成都海滨城浩海立方海洋馆露营，水母培育室课堂，4D魔幻艺术演出，获环保小卫士证书，海狮表演，夜巡探险，鲨鱼剧场，小小饲养员</dd>
				<span>￥388起</span>
			</dl>
			<dl>
				<dt><img src="../image/lb-x1.jpg" alt=""></dt>
				<dd>【夜宿海洋馆奇妙夜 成都2天1晚自由行特卖】住成都海滨城浩海立方海洋馆露营，水母培育室课堂，4D魔幻艺术演出，获环保小卫士证书，海狮表演，夜巡探险，鲨鱼剧场，小小饲养员</dd>
				<span>￥388起</span>
			</dl>
			<dl>
				<dt><img src="../image/lb-x1.jpg" alt=""></dt>
				<dd>【夜宿海洋馆奇妙夜 成都2天1晚自由行特卖】住成都海滨城浩海立方海洋馆露营，水母培育室课堂，4D魔幻艺术演出，获环保小卫士证书，海狮表演，夜巡探险，鲨鱼剧场，小小饲养员</dd>
				<span>￥388起</span>
			</dl>
			<dl>
				<dt><img src="../image/lb-x1.jpg" alt=""></dt>
				<dd>【夜宿海洋馆奇妙夜 成都2天1晚自由行特卖】住成都海滨城浩海立方海洋馆露营，水母培育室课堂，4D魔幻艺术演出，获环保小卫士证书，海狮表演，夜巡探险，鲨鱼剧场，小小饲养员</dd>
				<span>￥388起</span>
			</dl>

		</div>
		
		<div class="tab">
			<ul>
				<li><a href="#">景点门票</a></li>
				<li><a href="#">周边游</a></li>
				<li><a href="#">国内游</a></li>
				<li><a href="#">出境游</a></li>
			</ul>
		</div>

		<div class="tab-1">
			<dl>
				<dt><img src="../image/tab-2.jpg" alt="">
				<span>￥29.9起</span></dt>
				<dd>北京欢乐谷</dd>
			</dl>
		</div>
		<div class="tab-1">
			<dl>
				<dt><img src="../image/tab-2.jpg" alt="">
				<span>￥29.9起</span></dt>
				<dd>北京欢乐谷</dd>
			</dl>
		</div>
		<div class="tab-1">
			<dl>
				<dt><img src="../image/tab-2.jpg" alt="">
				<span>￥29.9起</span></dt>
				<dd>北京欢乐谷</dd>
			</dl>
		</div>
		<div class="tab-1">
			<dl>
				<dt><img src="../image/tab-2.jpg" alt="">
				<span>￥29.9起</span></dt>
				<dd>北京欢乐谷</dd>
			</dl>
		</div>
		<div class="tab-1">
			<dl>
				<dt><img src="../image/tab-2.jpg" alt="">
				<span>￥29.9起</span></dt>
				<dd>北京欢乐谷</dd>
			</dl>
		</div>

		<div class="back">
			顶部
		</div>
		</section>
</template>

<style type="text/css" scoped>
	header{
			width: 100%;
			height: 1.3rem;
			display: flex;
			justify-content: space-between;
			font-size: .6rem;
			align-items: center;
		}
		header a{
			margin:0 0 1% 3%;
		}
		header>span:first-of-type{
			font-size: .5rem;
			color: #000;
			margin-left: -.6rem;
		}
		.search{
			height: .8rem;
			width: 94%;
			border: .04rem solid #eee;
			display: flex;
			margin-left: .25rem;
			margin-bottom: .25rem;
			font-size: .4rem;
		}
		.search>input{
			width: 70%;
			font-size: .4rem;
			border: none;
			outline: none;
		}
		.search>a{
			line-height: .8rem;
			text-align: center;
			width: 15%;	
			color: #d30775;
		}
		.search>span{
			display: block;
			line-height: .8rem;
			width: 10%;

		}
		.search>span>img{
			margin-top: .25rem;
		}
		.lb{
			width: 100%;
			height: 2.6rem;
			font-size: 2rem;
			text-align: center;
			background: greenyellow;
		}
		.lb img{
			height: 2.6rem;
			width: 100%;
		}
		.hot{
			width: 100%;
			height: 1.1rem;
			line-height: 1.1rem;
			font-size: .4rem;
		}
		.hot>span:first-of-type{
			width: 3px;
    		height: 14px;
    		background: #d30775;
    		border-radius: .02rem;
    		margin-left: .2rem;
   			 margin-right: .2rem;
			border-left:  .1rem solid #d30775;
		}
		.hb{
			width: 100%;
			height: 1.8rem;
			background: blue;
			font-size: 	1.3rem;
			text-align: center;
		}
		.hb img{
			height: 1.8rem;
			width: 100%;
		}
		.nav{
			height: 2rem;
			padding: .2rem;
			border-bottom: .3rem solid #ccc;
		}
		.nav>ul>li{
			float: left;
			height: .7rem;
			line-height: .25rem;
			padding: .2rem;
			margin: .15rem;
			border-radius: .25rem;
			background: #ccc;
			font-size: .4rem;
		}
		.theme{
			height: .8rem;
			width: 100%;
			font-size: .45rem;
			text-align: center;
		}
		.theme>span{
			font-size: .6rem;
			opacity: .1;
			color: #fffa;
		}
		.theme>span:nth-of-type(3){
			font-size: .45rem;
			opacity: 1;
			color: #000；
		}
		.theme-img{
			width: 100%;
			margin-top: .2rem;
			display: flex;
			border-top: .01rem solid #ccc;
			border-bottom: .3rem solid #ccc;
		}
		.theme-left{
			border-right: .01rem solid #ccc;
			width: 50%;
		}
		.theme-right{
			width: 50%;
		}
		.theme-left>img{
			width: 100%;
		}
		.theme-right>img{
			width: 100%;
		}
		.theme-right>img:first-of-type{
			border-bottom: .01rem solid #ccc;
		}
		.lb-x{
			display: flex;
			overflow: scroll;
			width: 10rem;
			border-bottom: .3rem solid #ccc;
			overflow-y: auto;
		}
		.lb-x>dl>dt{
			display: flex;
			flex-wrap: wrap;
			width: 3.5rem;
			height: 2.5rem;
		}
		.lb-x>dl{
			width: 3.5rem;
			height: 3.8rem;
			margin: .25rem;
		}
		.lb-x>dl>dd{
			height: .8rem;
			overflow: hidden;
		}
		.lb-x>dl>dt>img{
			width: 100%;
		}
		.tab{
			width: 100%;
			height: .8rem;
			margin-top: .2rem;
		}
		.tab>ul{
			display: flex;
			height: .8rem;
			width: 100%;
			justify-content: space-around;
		}
		.tab>ul>li{
			background: #d30775;
			border-radius: .2rem;
			height: .6rem;
			line-height: .2rem;
			padding: .2rem;
		}
		.tab>ul>li>a{
			color: #fff;
		}
		.tab-1{
			width: 100%;
		}
		.tab-1>dl>dt{
			height: 4rem;
			width: 100%;
			overflow: hidden;
			position: relative;
		}
		.tab-1>dl>dt>img{
			width: 100%;
			margin-top: -1.2rem;
		}
		.tab-1>dl>dd{
			width: 100%;
			height: 1rem;
			font-size: .4rem;
			line-height: 1rem;
			padding-left: .4rem;
		}
		.tab-1>dl>dt>span{
			width: 2.7rem;
			height: 1rem;
			background: orange;
			position: absolute;
			top: 2.5rem;
			right: .000000001rem;
			text-align: center;
			line-height: 1rem;
			font-size: .5rem;
			color: #fff;
			border-radius: .2rem 0 0 .2rem;
		}
		.back{
			width: 1.2rem;
			height: 1.2rem;
			background: #d30775;
			border-radius: 1rem;
			line-height: 1.2rem;
			text-align: center;
			color: #fff;
			position: fixed;
			bottom: 3rem;
			right: .3rem;
		}
</style>